<template>
  <div class="container">
    <Nav
      :isFix="isFixNav"
      :textColor="isFixNav ? '#222' : '#fff'"
      :bgColor="isFixNav ? '#fff' : 'rgba(0, 0, 0, 0)'"
      :logo="
        isFixNav
          ? 'https://imgs.nexbie.com/uploads/2e9c2bc766c44179a8fc5898f62acc22.png'
          : 'https://imgs.nexbie.com/uploads/cf6deaa164d74623a17e4381dfe1fdf4.webp'
      " />
    <div v-if="isFixNav" class="nav_fix" />
    <div class="content mt-[16px]">
      <img
        class="title_img"
        src="https://imgs.nexbie.com/uploads/9cdbb94f3cb64405a10a7813d6289119.webp"
        alt="" />
      <div class="title_des mt-[12px]">
        Bring your favorite memories to life with our custom 3D-printed photo frames. It’s a unique
        and wonderful gift, ideal for your family and friends.
      </div>
      <div class="m_t_18">
        <UpLoadImg @upLoadImg="upImg">
          <img
            class="up_img"
            src="https://imgs.nexbie.com/uploads/b89ef2863aca4003961991a6b2800bd4.webp" />
        </UpLoadImg>
      </div>
      <img
        class="step_img m_t_18"
        src="https://imgs.nexbie.com/uploads/d083e70cc16f489ca0df2777bdaf0763.webp"
        alt="" />
      <div class="about_title mt-[24px]">About Nexbie</div>
      <img
        class="about_img mt-[16px]"
        src="https://imgs.nexbie.com/uploads/c16b1719231142788c8870b62b118978.webp"
        alt="" />
      <div class="about_title mt-[24px]">Your Nexbie Adventure</div>
      <img
        class="adv_img"
        src="https://imgs.nexbie.com/uploads/36df2dd9072e470bbe2c90d8f998e25c.webp"
        alt="" />
      <PhotoComment />
      <div class="join_text mt-[24px]">
        Join Nexbie. Create with Al.
        <br />
        Make it real. Bring inspiration to life.
      </div>
      <div class="relative mt-[34px]">
        <div class="btn" @click="goHome">Join Nexbie</div>
        <img
          class="bottom_img"
          src="https://imgs.nexbie.com/uploads/9823eddbe7594042baf983a208af0d20.webp"
          alt="" />
      </div>
    </div>
    <ChristmasSnow />
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, onUnmounted, ref } from 'vue';
  import Nav from '@/components/Nav.vue';
  import UpLoadImg from '@/views/activity/components/UpLoadImg.vue';
  import ChristmasSnow from '@/views/activity/components/ChristmasSnow.vue';
  import PhotoComment from '@/views/activity/components/PhotoComment.vue';
  import { useRoute, useRouter } from 'vue-router';
  import { throttle } from 'lodash';
  import { useUserStore } from '@/store/user';
  const router = useRouter();
  const route = useRoute();
  const userStore = useUserStore();
  const userInfo = computed(() => userStore.user);
  const isLoggedIn = computed(() => userStore.isAuthenticated);
  const isFixNav = ref<boolean>(false);

  onMounted(() => {
    window.addEventListener('scroll', throttleHandleScroll);
  });

  onUnmounted(() => {
    window.removeEventListener('scroll', throttleHandleScroll);
  });

  const handleScroll = () => {
    isFixNav.value = window.scrollY > 150;
  };

  const throttleHandleScroll: any = throttle(handleScroll, 300);

  const upImg = () => {
    router.push('/activity/cropImage');
  };

  const goLogin = () => {
    router.push('/login');
  };

  const goHome = () => {
    const { path } = route;
    router.push('/');
  };
</script>

<style scoped lang="scss">
  .container {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(180deg, #0b4d35 26.92%, #112954 100%);
    //padding-top: 66px;
    .m_t_18 {
      margin-top: -15px;
    }
    .nav_fix {
      height: 56px;
      width: 100%;
    }
    .content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .step_img {
      width: 361px;
      height: 157px;
    }
    .about_title {
      color: #fff7bc;
      text-align: center;
      font-family: CrealitySans;
      font-size: 20px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }
    .about_img {
      width: 361px;
      height: 336px;
    }
    .adv_img {
      width: 100vw;
      height: 468px;
    }
    .bottom_img {
      width: 100vw;
      height: 178px;
    }
    .join_text {
      color: var(---0, #fff);
      text-align: center;
      font-family: CrealitySans;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 170%; /* 20.4px */
      padding: 0 56px;
    }
    .btn {
      color: var(---0, #fff);
      font-family: 'InterTight';
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      padding: 10.5px 38px;
      border-radius: 8px;
      background: var(---, #f76b1b);
      position: absolute;
      left: 50%;
      top: -6px;
      transform: translate(-50%, 0);
    }
    .up_img {
      width: 100vw;
      height: 325px;
    }
    .flex_row_sp {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .title_img {
      width: 304px;
      height: 41px;
    }
    .title_des {
      padding: 0 16px;
      color: var(---2, #ededed);
      text-align: center;
      font-family: CrealitySans;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 170%; /* 20.4px */
    }
  }
</style>
